<template>
  <div id="app">
    <!-- router-link就是一个导航组件，类似于a标签 -->
    <router-link to="/home">主页</router-link>
    |
    <router-link to="/discover">发现</router-link>
    |
    <router-link to="/friend">游戏角色</router-link>
    |
    <router-link to="/goods">商品</router-link>
    |
    <router-link to="/count">计算器</router-link>
    |
    <router-link to="/gouwuche">购物车</router-link>
    |
    <router-link to="/axios">axios的使用</router-link>
    &nbsp;
    <button @click="jump">个性十足的按钮</button>
    <br>
    <br>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    methods:{
      jump() {
        //  编程式导航，使用js逻辑来控制路由的跳转，而不是使用router-link组件跳转

        // push         向浏览器历史记录栈中压入一个记录（最多用的）
        // 直接传路径
        // this.$router.push("/discover")
        // 传对象,通过路径跳转
        // this.$router.push({path:"/discover"})
        // 传入对象，使用名字跳转
        // this.$router.push({name:"toplist"})

        // 参数的传递 query params,这两种传参有什么区别？
        // query刷新页面不会丢失    params刷新页面会丢失
        // this.$router.push({path:"/home",query:{song:"周杰伦的稻香"}})
        // 直接传递params的时候，需要使用name来进行跳转，不然传递是不成功的 
        this.$router.push({name:"/home",params:{song:"周杰伦的稻香"}})

        // replcae      替换掉上个历史记录
        // 和push的用法是一样的，区别就是，会替换掉上一个历史记录，访问不会产生历史记录
        // go(number)   去到第几个历史记录，以当前的历史记录为原点，当前就是0，左边的历史记录就是负值，右边的是正值 、        
        // forward      前进（相当于点击了浏览器历史记录的前进按钮）
        // back         后退（相当于点击了浏览器历史记录的后退按钮）

        console.log(this.$router);
      },
    }
  } 
</script>

